import * as THREE from 'three';
let width = 600;
let height = 300;
const init = () => {
	scene = new THREE.Scene();
	scene.background = new THREE.Color(0x000000);
	camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
	let geometry = new THREE.BufferGeometry();
	const vertices = [];
	for (let i = 0; i < 10000; i++) {
		const x = 2000 * Math.random() - 1000;
		const y = 2000 * Math.random() - 1000;
		const z = 2000 * Math.random() - 1000;

		vertices.push(x, y, z);
	}
	const sprite = new THREE.TextureLoader().load('../img/texture/sprites/disc.png');

	geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

	let material = new THREE.PointsMaterial({
		size: 35,
		sizeAttenuation: true,
		map: sprite,
		alphaTest: 0.5,
		transparent: true
	});
	material.color.setHSL(1.0, 0.3, 0.7);
	let mesh = new THREE.Points(geometry, material);

	scene.add(mesh);
	let renderer;

	camera.position.z = 5;
};
const animate = () => {
	requestAnimationFrame(animate);
	// cube.rotation.x += 0.01
	// cube.rotation.y += 0.01
	renderer.render(scene, camera);
};

const resize = () => {
	renderer.setSize(width, height);
	camera.aspect = width / height;
	camera.updateProjectionMatrix();
};

const createScene = (el) => {
	renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, canvas: el });
	init();
	resize();
	animate();
};
let camera: any, renderer: any, mesh: any, mesh1: any, scene: any;
export { createScene, resize };
// window.addEventListener("resize", resize)
